<template>
    <div class="all" v-show="dialogVisible">
        <div class="container">
        <div class="close">
            <img src="../assets/images/public/add.svg" alt="关闭" @click="emit('close')">
        </div>
        <slot></slot>
    </div>
    </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue';

const props = defineProps({
    dialogVisible: Boolean,
    winWidth: Number ,
    winHeight: Number,
    closeSize: Number,
})
const emit = defineEmits(['close']);
onMounted(()=>{
    console.log(props.winWidth);
    let container = document.querySelector('.all').querySelector('.container');
    container.style.width = props.winWidth
    container.style.height = props.winHeight
    let close = document.querySelector('.all').querySelector('.container').querySelector('.close').querySelector('img')
    close.style.scale = props.closeSize
})

</script>
<style scoped>
.all{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    height: 100%;
    background-color: var(--el-overlay-color-lighter);
    overflow: auto;
    
}
.container {
    width: 43%;
    height: 440px;
    background-color: #ffffff;
    position: absolute;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    transform: translate(-50%,-50%);
      left: 50%;
      top:50%
}

.close {
    position: absolute;
    right: 5%;
    top: 6.5%;
    cursor: pointer;
    z-index: 100;
}

.close img {
    transform: rotate(45deg);
    scale: 1.9;
    cursor: pointer;
}

</style>